<template>
<div class="loading-box">
	<div class="loading">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>
</div>
</template>
<script>
  export default {
    name: 'LOADING',
    data () {
      return {
      }
    },
    created(){
    },
    methods:{

    },
  }
</script>
<style scoped>
.loading-box{
 position: fixed; left: 0;right: 0;top: 0;bottom: 0; /*使得loading层浮动到其他层上面，并且尺寸和整个屏幕大小一样*/
 z-index: 10000;    /*给个 z-index 覆盖到主题内容上面*/
 background: #fff;  /*遮挡后面的内容*/
 display: flex;  /*采用flex布局*/
 justify-content:center; /*loading-box中的内容 水平居中*/
 align-items: center;    /*loading-box中的内容 垂直居中*/
 }
.loading{position:fixed;width:120px;height:50px;top:40%;left:55%;z-index:555;-webkit-transform:translate(-50%,0);-moz-transform:translate(-50%,0);-ms-transform:translate(-50%,0);-o-transform:translate(-50%,0);transform:translate(-50%,0);}
.loading > div:nth-child(2){-webkit-animation:pacman-balls 1s 0s infinite linear;animation:pacman-balls 1s 0s infinite linear;}
.loading > div:nth-child(3){-webkit-animation:pacman-balls 1s 0.33s infinite linear;animation:pacman-balls 1s 0.33s infinite linear;}
.loading > div:nth-child(4){-webkit-animation:pacman-balls 1s 0.66s infinite linear;animation:pacman-balls 1s 0.66s infinite linear;}
.loading > div:nth-child(5){-webkit-animation:pacman-balls 1s 0.99s infinite linear;animation:pacman-balls 1s 0.99s infinite linear;}
.loading > div:first-of-type{width:0px;height:0px;border-right:25px solid transparent;border-top:25px solid #e73068;border-left:25px solid #e73068;border-bottom:25px solid #e73068;border-radius:25px;-webkit-animation:rotate_pacman_half_up 0.5s 0s infinite;animation:rotate_pacman_half_up 0.5s 0s infinite;}
.loading > div:first-of-type::after{position:relative;content:"";width:10px;height:10px;background-color:#333;left:0px;top:-20px;border-radius:100%;z-index:9999;}
.loading > div:nth-child(2){width:0px;height:0px;border-right:25px solid transparent;border-top:25px solid #e73068;border-left:25px solid #e73068;border-bottom:25px solid #e73068;border-radius:25px;-webkit-animation:rotate_pacman_half_down 0.5s 0s infinite;animation:rotate_pacman_half_down 0.5s 0s infinite;margin-top:-50px;}
.loading > div:nth-child(3),.loading > div:nth-child(4),.loading > div:nth-child(5),.loading > div:nth-child(6){background-color:#e73068;width:15px;height:15px;border-radius:100%;margin:2px;width:10px;height:10px;position:absolute;-webkit-transform:translate(0,-6.25px);-ms-transform:translate(0,-6.25px);transform:translate(0,-6.25px);top:25px;left:100px;}
@-webkit-keyframes pacman-balls{
  75%{opacity:0.7;}
  100%{-webkit-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px);}
}
@keyframes pacman-balls{
  75%{opacity:0.7;}
  100%{-webkit-transform:translate(-100px,-6.25px);transform:translate(-100px,-6.25px);}
}
@-webkit-keyframes rotate_pacman_half_up{
  0%{-webkit-transform:rotate(270deg);transform:rotate(270deg);}
  50%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
  100%{-webkit-transform:rotate(270deg);transform:rotate(270deg);}
}
@keyframes rotate_pacman_half_up{
  0%{-webkit-transform:rotate(270deg);transform:rotate(270deg);}
  50%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
  100%{-webkit-transform:rotate(270deg);transform:rotate(270deg);}
}
@-webkit-keyframes rotate_pacman_half_down{
  0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);}
  50%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  100%{-webkit-transform:rotate(90deg);transform:rotate(90deg);}
}
@keyframes rotate_pacman_half_down{
  0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);}
  50%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
  100%{-webkit-transform:rotate(90deg);transform:rotate(90deg);}
}
</style>

